<template>
  <div style="word-break: break-word">
    <template v-if="item.type == 'input'">
      <el-input
        v-model.trim="fields[item.key]"
        clearable
        :disabled="item.disabled"
        @focus="()=>{handleInpFocus(item,fields)}" />
    </template>
    <template v-if="item.type == 'textarea'">
      <el-input
        v-model.trim="fields[item.key]"
        clearable
        :disabled="item.disabled"
        type="textarea" />
    </template>
    <template v-if="item.type == 'date'">
      <el-date-picker
        v-model.trim="fields[item.key]"
        clearable
        style="width:100%"
        :disabled="item.disabled"
        :type="item.dateType|| 'date'"
        :picker-options="item.pickerOptions?item.pickerOptions:null"
        :value-format="item.valueFormat || 'yyyy-MM-dd'"
        placeholder="选择日期" />
    </template>
    <template v-if="item.type == 'select'">
      <el-select
        v-model.trim="fields[item.key]"
        :clearable="item.multiple === undefined ? true : !item.multiple"
        :collapse-tags="item.multiple === undefined ? false : item.multiple"
        :multiple="item.multiple"
        :disabled="item.disabled"
        style="width:100%"
        placeholder="请选择">
        <el-option
          v-for="(i, indexs) in item.options"
          :key="indexs"
          :disabled="i.disabled"
          :label="item.customKey?i[item.customKey.label]:i.label"
          :value="item.customKey?i[item.customKey.value]:i.value" />
      </el-select>
    </template>
    <template v-if="item.type=='file'">
      <!-- <upload-file
        :config="item.config"
        :file-upload-complete="item.uploadCompleteCb"
        @uploadCompleteToParent="toParent"></upload-file> -->
      <template v-if="item.disabled">
        <file-list
          :show-remove="false"
          :file-data="item.config.fileList">
        </file-list>
      </template>
      <template v-else>
        <upload-file
          :config="item.config"
          :file-upload-complete="item.uploadCompleteCb"
          @uploadCompleteToParent="toParent"></upload-file>
      </template>
    </template>
    <template v-if="item.type=='other'">
      <component
        :is="dynamicComponent(item)"
        v-bind="item.props"></component>
    </template>
    <template v-if="item.type=='text'">
      {{ renderText(item,fields[item.key]) }}
    </template>
  </div>
</template>
<script>
  export default {
    props: {
      item: {
        type: Object,
        required: true
      },
      fields: {
        type: Object,
        required: true
      }
    },
    methods: {
      toParent(fileList) {
        this.$emit('uploadComplete', fileList)
      },
      dynamicComponent(item) {
        if (item.componentUrl) {
          return resolve => require([`@/views/${item.componentUrl}`], resolve)
        }
      },
      // 处理输入框焦点事件
      handleInpFocus(item) {
        if (item.handleFocus && item.handleFocus instanceof Function) {
          item.handleFocus(item, this.fields)
        }
      },
      // 渲染值集对应文案
      renderText(obj, code) {
        if (!obj.options) {
          return code
        }
        try {
          const options = obj.options
          const customKey = obj.customKey
          const t = options.find(item => {
            if (customKey) {
              return item[customKey.value] == code
            }
            return item.value == code
          })
          return customKey ? t[customKey.label] : t['label']
        } catch (e) {
          // console.log(e)
          return code
        }
      }
    }
  }
</script>
